<template>
  <div class="detail-page van-hairline--bottom">
     <van-nav-bar
     left-arrow
     border
      @click-left="$router.back()"
      fixed
      title="文章详情"
    ></van-nav-bar>
      <div class="head">
        <van-image
          round
          class="avatar"
          :src="detail.aut_photo"
        ></van-image>
        <div class="info">
          <p class="name">{{detail.aut_name}}</p>
          <p class="dep">{{detail.pubdate}}</p>
        </div>
        <van-button class="btn" size="small" round :class="value?'active':''" @click="follow">{{value?'已关注':'关注'}}</van-button>
      </div>
      <div class="body">
        <h3 class="title">{{detail.title}}</h3>
        <p class="intro" v-html="detail.content"></p>
      </div>
    </div>
</template>
<script>
import { getArticleDetail, getLike, delLike } from '@/api/article'
import { Toast } from 'vant'
export default {
  name: 'detail-page',
  data () {
    return {
      detail: {},
      value: 0
    }
  },
  async created () {
    this.detail = {}
    const { data } = await getArticleDetail(this.$route.params.id)
    this.detail = data
  },
  methods: {
    async follow () {
      this.value = !this.value
      // 关注用户
      if (this.value) {
        try {
          const res = await getLike(this.detail.art_id)
          console.log(res)
          Toast('关注成功')
        } catch (e) {
          console.log(e)
        }
      }
      // 取消用户
      if (!this.value) {
        try {
          await delLike(this.detail.art_id)
          Toast('已取消关注')
        } catch (e) {
          console.log(e)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detail-page {
  padding: 60px 25px 10px 25px;
  .head {
    display: flex;
    align-items: center;
    .avatar {
      width: 38px;
      height: 38px;
      margin-right: 10px;
    }
    .info {
      width: 200px;
      padding-right: 10px;
      .name {
        font-weight: 600;
        color: #1D2129;
      }
      .dep {
        color: #B0B5BD;
        font-size: 12px;
      }
    }
    .btn {
      padding: 0 12px;
      background-color: #F2F3F5;
      color: #165DFF;
      height: 28px;
      width: 72px;
    }
  .active{
        background-color: #165DFF !important;
        color: #fff;
      }
  }
  .body {
    .title {
      font-size: 18px;
      margin-top: 30px;
    }

    .intro {
      margin-top: 7px;
      line-height: 2;
      color: #4E5969;
      font-size: 14px;
    }
    .imgs {
      margin-top: 7px;
      display: flex;
      .van-image {
        width: 106px;
        height: 106px;
        margin-right: 12px;
        border-radius: 12px;
        overflow: hidden;
        &:last-child {
          margin-right: 0;
        }
      }
      &.large {
        .van-image {
          width: 185px;
          height: 125px;
        }
      }
    }

  }
}

</style>
